import { UserOutlined } from '@ant-design/icons';
import { Button, Menu, message, Popover } from 'antd';
import { saveAs } from 'file-saver';
import Cookies from 'js-cookie';
import React, { useEffect, useState } from 'react';
import { connect, history, useSelector } from 'umi';

import type { FC } from 'react';
import type { Dispatch } from 'umi';

import AndonImg from '@/assets/images/Andon.svg';
import type { IReduxState } from '@/models/global';
import { namespace } from '@/models/global';
import type { AllReduxState } from '@/pages/ProOrder';

import styles from './index.less';

import BaseDiv from '../baseDiv';
import MsgPop from '../msgPop';

const { SubMenu } = Menu;
const mapStateToProps = (state: { [namespace]: IReduxState }) => {
  return {
    ...state[namespace],
  };
};
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    setCurrentMenu: (payload?: string) => {
      dispatch({
        type: `${namespace}/setCurrentMenu`,
        payload,
      });
    },
  };
};

export interface Props
  extends ReturnType<typeof mapStateToProps>,
    ReturnType<typeof mapDispatchToProps> {}

const HeaderBar: FC<Props> = (props) => {
  const GLOBAL_DATA: any = useSelector<AllReduxState>((state) => state.GLOBAL_DATA);
  const [current, setCurrent] = useState<string>('');
  const { setCurrentMenu } = props;
  const handleClick = (e: any) => {
    setCurrent(e.key);
    setCurrentMenu(e.key);
    if (e.key === 'contact' || e.key === 'feedback') {
      message.info('暂无此功能');
    }
  };

  useEffect(() => {
    if (GLOBAL_DATA?.currentMenu==='price') {
      setCurrent(GLOBAL_DATA?.currentMenu);
    }
  }, [GLOBAL_DATA]);
  const personCenterClicks = () => {
    // setCurrent('personCenter');
    // setCurrentMenu('personCenter');
    window.open('PersonCenter');
  };

  useEffect(() => {
    setCurrent('product');
    setCurrentMenu('product');
  }, [setCurrentMenu]);
  const boxStyle: React.CSSProperties = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  const reset = () => {
    setCurrent('product');
    setCurrentMenu('product');
  };

  const logout = () => {
    localStorage.clear();
    Cookies.remove('saas_token'); // removed!
    history.push('Login');
    setTimeout(() => {
      message.warn('已经退出登录 请重新登录！');
    }, 100);
  };

  const USER_INFO = JSON.parse(localStorage.getItem('USER_INFO') as string);

  return (
    <BaseDiv boxStyles={boxStyle}>
      <div className={styles.leftBar}>
        <img src={AndonImg} className={styles.imgStyle} onClick={reset} />
        <div className={styles.sysBar} onClick={reset}>
          <div style={{ fontSize: 24, marginBottom: -8, fontWeight: 700 }}>Andon</div>
          <div style={{ fontSize: 12 }}>异常快速反应系统</div>
        </div>
      </div>
      <Menu
        onClick={handleClick}
        selectedKeys={[current]}
        style={{
          height: '100%',
          width: '60%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        mode="horizontal"
      >
        <Menu.Item
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
          key="product"
        >
          首页
        </Menu.Item>
        <Menu.Item key="price">价格</Menu.Item>
        <Menu.Item key="custom">定制</Menu.Item>
        <SubMenu key="download" title="下载">
          <Menu.Item
            onClick={() => {
              saveAs('/api/Asset/Download/2022040117504515743691076931584', '产品操作手册.zip');
              // window.open('/api/Asset/Download/2022040117504515743691076931584');
            }}
            key="instructions"
          >
            产品操作手册
          </Menu.Item>
          <Menu.Item key="plugin"
            onClick={() => {
              saveAs('/api/Asset/Download/2022032214265015729334832959488', '移动端语音播报.apk');
              // window.open('/api/Asset/Download/2022032214265015729334832959488');
            }}
          >移动端语音播报</Menu.Item>
          <Menu.Item
            onClick={() => {
              saveAs('/api/Asset/Download/2022040114493015743512888266752', '安灯移动端.apk');
              // window.open('/api/Asset/Download/2022040114493015743512888266752');
            }}
            key="app"
          >
            安灯移动端
          </Menu.Item>
          <Menu.Item
            onClick={() => {
              // window.open('/api/Asset/Download/2022050710575915794246098882560');
              saveAs('/api/Asset/Download/2022050710575915794246098882560', 'PC端语音播报.exe');
            }}
            key="pcVoice"
          >
            PC端语音播报
          </Menu.Item>
          <Menu.Item
            onClick={() => {
              saveAs('/api/Asset/Download/2022050710585415794246994743296', 'PC托盘通知.exe');
              // window.open('/api/Asset/Download/2022050710585415794246994743296');
            }}
            key="pcNotification"
          >
            PC托盘通知
          </Menu.Item>
        </SubMenu>
        <Menu.Item key="contact">联系我们</Menu.Item>
        <Menu.Item key="feedback">意见反馈</Menu.Item>
      </Menu>
      <div className={styles.rightBar}>
        {Cookies.get('saas_token') ? (
          <>
            {/* <Popover
              content={popContent}
              placement="bottom"
              overlayStyle={{ width: 350 }}
              title={titleContent}
            >
              <div className={styles.iconStyle1}>
                {tableData.length ? (
                  <Badge dot>
                    <Avatar
                      style={{ color: '#333', background: '#fff', width: 18 }}
                      icon={<BellOutlined />}
                    />
                  </Badge>
                ) : (
                  <BellOutlined />
                )}
              </div>
            </Popover> */}

            <MsgPop />
            <Popover
              content={
                <div className={styles.userContent}>
                  <div onClick={() => history.push('/PersonCenter')}>个人中心</div>
                  <div onClick={logout}>退出登录</div>
                </div>
              }
              title={() => (
                <div className={styles.user}>
                  <div className={styles.iconStyle}>
                    <img src={USER_INFO?.avatar} alt="" />
                  </div>
                  <span>{USER_INFO?.name}</span>
                </div>
              )}
            >
              <div id="personCenter" onClick={personCenterClicks} className={styles.iconStyle}>
                <UserOutlined onClick={personCenterClicks} />
                {/*<div id={'personCenterContent'} className={styles.hoverContent}>*/}
                {/*  <div className={styles.user}>*/}
                {/*    <div onClick={personCenterClicks} className={styles.iconStyle}>*/}
                {/*      <img src={USER_INFO?.avatar} alt="" />*/}
                {/*    </div>*/}
                {/*    <span>{USER_INFO?.name}</span>*/}
                {/*  </div>*/}
                {/*  <div className={styles.userContent}>*/}
                {/*    <div>个人设置</div>*/}
                {/*    /!*<div>已购产品</div>*!/*/}
                {/*    /!*<div onClick={() => {}}>历史订单</div>*!/*/}
                {/*    <div onClick={logout}>退出登录</div>*/}
                {/*  </div>*/}
                {/*</div>*/}
              </div>
            </Popover>
          </>
        ) : (
          <>
            <Button
              onClick={() => {
                history.push('Login');
              }}
              type="link"
            >
              登录
            </Button>
            <Button
              onClick={() => {
                history.push('Register');
              }}
              type="primary"
              className={styles.registerButton}
            >
              免费注册
            </Button>
          </>
        )}
      </div>
    </BaseDiv>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(HeaderBar);
